// @ts-ignore: Vue Router 4 类型声明问题
import { createRouter, createWebHistory } from 'vue-router';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
import Home from '@/views/Home.vue';

// 路由配置
const routes = [
  {
    // 根路径重定向到仪表板页面
    path: '/',
    redirect: '/dashboard',
  },
  {
    // 主页路由配置
    path: '/',
    name: 'Home',
    component: Home,
    children: [
      {
        // 仪表板页面路由
        path: '/dashboard',
        name: 'dashboard',
        meta: {
          title: '系统首页', // 页面标题
          noAuth: true, // 无需认证即可访问
        },
        component: () => import(/* webpackChunkName: "dashboard" */ '../views/dashboard.vue'),
      },
      {
        // 用户管理页面路由
        path: '/system-user',
        name: 'system-user',
        meta: {
          title: '用户管理', // 页面标题
          permiss: '11', // 权限标识
        },
        component: () => import(/* webpackChunkName: "system-user" */ '../views/system/user.vue'),
      },
      {
        // 角色管理页面路由
        path: '/system-role',
        name: 'system-role',
        meta: {
          title: '角色管理', // 页面标题
          permiss: '12', // 权限标识
        },
        component: () => import(/* webpackChunkName: "system-role" */ '../views/system/role.vue'),
      },
      {
        // 菜单管理页面路由
        path: '/system-menu',
        name: 'system-menu',
        meta: {
          title: '菜单管理', // 页面标题
          permiss: '13', // 权限标识
        },
        component: () => import(/* webpackChunkName: "system-menu" */ '../views/system/menu.vue'),
      },
      {
        // 基础表格页面路由
        path: '/table',
        name: 'basetable',
        meta: {
          title: '基础表格', // 页面标题
          permiss: '31', // 权限标识
        },
        component: () => import(/* webpackChunkName: "table" */ '../views/table/basetable.vue'),
      },
      {
        // 可编辑表格页面路由
        path: '/table-editor',
        name: 'table-editor',
        meta: {
          title: '可编辑表格', // 页面标题
          permiss: '32', // 权限标识
        },
        component: () =>
          import(/* webpackChunkName: "table-editor" */ '../views/table/table-editor.vue'),
      },
      {
        // schart图表页面路由
        path: '/schart',
        name: 'schart',
        meta: {
          title: 'schart图表', // 页面标题
          permiss: '41', // 权限标识
        },
        component: () => import(/* webpackChunkName: "schart" */ '../views/chart/schart.vue'),
      },
      {
        // echarts图表页面路由
        path: '/echarts',
        name: 'echarts',
        meta: {
          title: 'echarts图表', // 页面标题
          permiss: '42', // 权限标识
        },
        component: () => import(/* webpackChunkName: "echarts" */ '../views/chart/echarts.vue'),
      },
      {
        // 图标页面路由
        path: '/icon',
        name: 'icon',
        meta: {
          title: '图标', // 页面标题
          permiss: '5', // 权限标识
        },
        component: () => import(/* webpackChunkName: "icon" */ '../views/pages/icon.vue'),
      },
      {
        // 个人中心页面路由
        path: '/ucenter',
        name: 'ucenter',
        meta: {
          title: '个人中心', // 页面标题
        },
        component: () => import(/* webpackChunkName: "ucenter" */ '../views/pages/ucenter.vue'),
      },
      {
        // 富文本编辑器页面路由
        path: '/editor',
        name: 'editor',
        meta: {
          title: '富文本编辑器', // 页面标题
          permiss: '291', // 权限标识
        },
        component: () => import(/* webpackChunkName: "editor" */ '../views/pages/editor.vue'),
      },
      {
        // markdown编辑器页面路由
        path: '/markdown',
        name: 'markdown',
        meta: {
          title: 'markdown编辑器', // 页面标题
          permiss: '292', // 权限标识
        },
        component: () => import(/* webpackChunkName: "markdown" */ '../views/pages/markdown.vue'),
      },
      {
        // 导出Excel页面路由
        path: '/export',
        name: 'export',
        meta: {
          title: '导出Excel', // 页面标题
          permiss: '34', // 权限标识
        },
        component: () => import(/* webpackChunkName: "export" */ '../views/table/export.vue'),
      },
      {
        // 导入Excel页面路由
        path: '/import',
        name: 'import',
        meta: {
          title: '导入Excel', // 页面标题
          permiss: '33', // 权限标识
        },
        component: () => import(/* webpackChunkName: "import" */ '../views/table/import.vue'),
      },
      {
        // 主题设置页面路由
        path: '/theme',
        name: 'theme',
        meta: {
          title: '主题设置', // 页面标题
          permiss: '7', // 权限标识
        },
        component: () => import(/* webpackChunkName: "theme" */ '../views/pages/theme.vue'),
      },
      {
        // 日历页面路由
        path: '/calendar',
        name: 'calendar',
        meta: {
          title: '日历', // 页面标题
          permiss: '24', // 权限标识
        },
        component: () => import(/* webpackChunkName: "calendar" */ '../views/element/calendar.vue'),
      },
      {
        // 水印页面路由
        path: '/watermark',
        name: 'watermark',
        meta: {
          title: '水印', // 页面标题
          permiss: '25', // 权限标识
        },
        component: () =>
          import(/* webpackChunkName: "watermark" */ '../views/element/watermark.vue'),
      },
      {
        // 走马灯页面路由
        path: '/carousel',
        name: 'carousel',
        meta: {
          title: '走马灯', // 页面标题
          permiss: '23', // 权限标识
        },
        component: () => import(/* webpackChunkName: "carousel" */ '../views/element/carousel.vue'),
      },
      {
        // 分步引导页面路由
        path: '/tour',
        name: 'tour',
        meta: {
          title: '分步引导', // 页面标题
          permiss: '26', // 权限标识
        },
        component: () => import(/* webpackChunkName: "tour" */ '../views/element/tour.vue'),
      },
      {
        // 步骤条页面路由
        path: '/steps',
        name: 'steps',
        meta: {
          title: '步骤条', // 页面标题
          permiss: '27', // 权限标识
        },
        component: () => import(/* webpackChunkName: "steps" */ '../views/element/steps.vue'),
      },
      {
        // 表单页面路由
        path: '/form',
        name: 'forms',
        meta: {
          title: '表单', // 页面标题
          permiss: '21', // 权限标识
        },
        component: () => import(/* webpackChunkName: "form" */ '../views/element/form.vue'),
      },
      {
        // 上传页面路由
        path: '/upload',
        name: 'upload',
        meta: {
          title: '上传', // 页面标题
          permiss: '22', // 权限标识
        },
        component: () => import(/* webpackChunkName: "upload" */ '../views/element/upload.vue'),
      },
      {
        // 统计页面路由
        path: '/statistic',
        name: 'statistic',
        meta: {
          title: '统计', // 页面标题
          permiss: '28', // 权限标识
        },
        component: () =>
          import(/* webpackChunkName: "statistic" */ '../views/element/statistic.vue'),
      },
    ],
  },
  {
    // 登录页面路由
    path: '/login',
    meta: {
      title: '登录', // 页面标题
      noAuth: true, // 无需认证即可访问
    },
    component: () => import(/* webpackChunkName: "login" */ '../views/pages/login.vue'),
  },
  {
    // 注册页面路由
    path: '/register',
    meta: {
      title: '注册', // 页面标题
      noAuth: true, // 无需认证即可访问
    },
    component: () => import(/* webpackChunkName: "register" */ '../views/pages/register.vue'),
  },
  {
    // 重置密码页面路由
    path: '/reset-pwd',
    meta: {
      title: '重置密码', // 页面标题
      noAuth: true, // 无需认证即可访问
    },
    component: () => import(/* webpackChunkName: "reset-pwd" */ '../views/pages/reset-pwd.vue'),
  },
  {
    // 403无权限页面路由
    path: '/403',
    meta: {
      title: '没有权限', // 页面标题
      noAuth: true, // 无需认证即可访问
    },
    component: () => import(/* webpackChunkName: "403" */ '../views/pages/403.vue'),
  },
  {
    // 404页面未找到路由
    path: '/404',
    meta: {
      title: '找不到页面', // 页面标题
      noAuth: true, // 无需认证即可访问
    },
    component: () => import(/* webpackChunkName: "404" */ '../views/pages/404.vue'),
  },
  // 匹配所有未定义的路径，重定向到404页面
  { path: '/:path(.*)', redirect: '/404' },
];

// 创建路由实例
const router = createRouter({
  history: createWebHistory(), // 使用HTML5 History模式
  routes, // 路由配置
});

// 路由守卫示例
router.beforeEach((_to: any, _from: any, next: any) => {
  NProgress.start(); // 开始进度条
  next(); // 继续路由导航
});

router.afterEach(() => {
  NProgress.done(); // 结束进度条
});

export default router;